<template>
  <div class="bigBox">
    <!-- 头部搜索框 -->
    <div class="inputHeader" @click="handlerSearch">
      <!-- 小图标 -->
      <van-search class="search" placeholder="搜索商品，共30000+款好物" input-align="center" disabled />
    </div>
    <!-- 内容展示 -->
    <div class="main">
      <!-- 侧边导航 -->
      <div class="leftSidebar">
        <ul class="sidebarList">
          <li class="sidebarItem " :class="{ 'active': active == index }" @click="handlerClickLi($event, index)"
            v-for="category, index in getcategory.categoryL1List" :key="category.id" :data-categoryId="category.id">
            {{ category.name }}</li>
        </ul>
      </div>
      <!-- 右边列表 -->
      <div class="rightSidebar">
        <div class="goods">
          <!-- 最上面图片 -->
          <img class="bannerPic"
            :src="getcategory.currentCategory.bannerUrl || 'https://yanxuan.nosdn.127.net/static-union/1670915168b000c3.png'">
          <!-- 商品分类 -->
          <div class="cateType">
            <div class="categoryList" v-for="categoryGroupList, index in getcategory.categoryGroupList" :key="index">
              <span class="title">{{ categoryGroupList.name }}</span>
              <ul class="list">
                <!-- 每个li是一种商品 -->
                <li class="cateItem" v-for="category, index in categoryGroupList.categoryList" :key="index"
                  @click="handlerToDeatilList(category)">
                  <img class="cateImg" :src="category.wapBannerUrl">
                  <div class="cateName">{{ category.name }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { useCategoryStore } from '@/stores/useCategoryList'
import router from '@/router'
import { useRoute } from 'vue-router';
const getcategory = useCategoryStore()
const route = useRoute()
// 高亮类名
const active = ref<any>(0)
// 默认展示
const show = ref<number>(1)
// 点击切换商品展示及高亮切换
const handlerClickLi = (e: any, index: number) => {
  // 高亮切换
  active.value = index
  // 默认展示首页
  if (index === 0) {
    show.value = 1
  }
  // 获取存储的id数据
  const categoryId = e.target.getAttribute('data-categoryId')
  router.push({
    path: '/item/cateList',
    query: {
      categoryId
    }
  })
  show.value = 2
  if (getcategory.currentCategory) {
    getNewCategoryList(categoryId)
  }
}
// 点击搜索跳转
const handlerSearch = () => {
  router.push('/search')
}
// 点击商品跳转商品详细列表
const handlerToDeatilList = (category: any) => {
  const subCategoryId = category.id
  const categoryId = route.query.categoryId
  getGoodsDetailList(subCategoryId, categoryId)
  router.push({
    path: '/item/list',
    query: {
      subCategoryId,
      categoryId
    }
  })
}
// 获取商品详细列表
const getGoodsDetailList = async (subCategoryId: any, categoryId: any) => {
  await getcategory.getGoodsDetailList(subCategoryId, categoryId)
}
// 获取商品列表数据
const getNewCategoryList = async (id: number) => {
  await getcategory.getSecondGoodsList(id)
}
// 初始化数据展示
const initData = async () => {
  await getcategory.getGoodsList()
}
onMounted(() => {
  initData()
})

</script>

<style scoped>
.bigBox {
  position: relative;
}

.inputHeader {
  width: 10rem;
  height: 1.17rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  border-bottom: .03rem solid #d9d9d9;
  background-color: white;
}

.search {
  width: 9.2rem;
  height: .75rem;
  margin: 0 auto;
  border-radius: .27rem;
}

.main {
  width: 10rem;
  height: 16.48rem;
  display: flex;
  margin-top: 1.17rem;
}

.main .leftSidebar {
  width: 2.16rem;
  height: 16.48rem;
  border-right: .03rem solid #d9d9d9;
  position: fixed;
  top: 1.17rem;
  left: 0;
}

.main .leftSidebar .sidebarList {
  margin-top: .59rem;
}

.sidebarList .sidebarItem {
  width: 2.16rem;
  height: .67rem;
  font-size: .37rem;
  color: #333333;
  margin: .53rem 0;
  text-align: center;
}

.active {
  color: #AB2B2B !important;
  border-left: .08rem solid #AB2B2B;
}

.rightSidebar {
  width: 7.84rem;
  margin: .4rem 0 0 2.53rem;
}

.goods .bannerPic {
  width: 7.04rem;
  height: 2.56rem;
}

.goods .categoryList {
  margin-top: .13rem;
}

.goods .title {
  font-size: .37rem;
  color: #333333;
  font-weight: bolder;
}

.goods .list {
  display: flex;
  flex-flow: row wrap;
  margin-top: .27rem;
}

.goods .list .cateItem {
  width: 1.92rem;
  text-align: center;
  margin-right: .4rem;
}



.cateItem .cateImg {
  width: 1.92rem;
  height: 1.92rem;
}

.cateName {
  font-size: .32rem;
  color: #454545;
  font-weight: normal;
}
</style>